<template>
  <van-swipe v-if="sliderList.length">
    <van-swipe-item v-for="l in sliderList" :key="l.url">
      <img :src="l.url" alt="">
    </van-swipe-item>
  </van-swipe>
</template>

<script lang='ts'>
import { IGlobalState } from '@/store';
import { useStore } from 'vuex';
import { computed, defineComponent } from 'vue';
import * as Types from '@/store/actions-types';

export default defineComponent({
  async setup() {
    // 页面一家在就要获取数据
    let store = useStore<IGlobalState>();

    let sliderList = computed(() => store.state.home.sliders);

    //注意：上面是computed的话，点的时候，先要value，才能拿到它的值
    if (sliderList.value.length == 0) {
      // 缓存，如果数据没有获取到才获取、
      await store.dispatch(`home/${Types.SET_SLIDER_LIST}`);
    }

    return {
      sliderList,
    };
  },
});
</script>